<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">设置展位密码</p>
        <p class="head-tip">8-16位字符，至少包含数字 大小写字母 或特殊符号的任意三个</p>
      </span>
      <div class="content">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="175px" class="demo-ruleForm">
          <el-form-item label="超级管理员手机号" prop="immobile">
            <el-input v-model="ruleForm.immobile" class="w300" size="small" disabled />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input
              v-model="ruleForm.code"
              class="w175 mr16"
              size="small"
              placeholder="请输入验证码"
              auto-complete="new-password"
            />
            <el-button v-if="timeShow" class="w110" plain @click="getSendCode">获取验证码</el-button>
            <el-button v-if="!timeShow" class="w110" plain>重新获取({{ count }}秒)</el-button>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              class="w300"
              size="small"
              placeholder="请输入新密码"
              auto-complete="new-password"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import { validatePass } from '@/utils/validate'
import { getImListId, getImShowId } from '@/utils/auth'

export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      loading: false,
      timeShow: true,
      count: '',
      timer: null,
      ruleForm: {
        immobile: '',
        code: '',
        password: ''
      },
      rules: {
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ required: true, validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  computed: {
    isShowDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('closeEvents', 'isPassword', val)
      }
    }
  },
  created () {
    this.ruleForm = JSON.parse(JSON.stringify(this.boothname))
  },
  methods: {
    closeDialog () {
      this.$emit('closeEvents', 'isPassword', false)
    },
    async getSendCode () {
      const params = {
        mobile: this.ruleForm.immobile,
        type: 2 // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      }
      await api.imlist.getUserCode(params)
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timeShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.timeShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            const params = {
              type: 2,
              username: getImShowId() || getImListId(),
              mobile: this.ruleForm.immobile,
              code: this.ruleForm.code,
              password: this.ruleForm.password
            }
            await api.imlist.modifyBaseInfo(params)
            this.loading = false
            this.closeDialog()
          } catch (error) {
            this.loading = false
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.w300 {
  width: 300px!important;
}
.w175 {
  width: 175px!important;
}
.container {
  .thisblack-bgc {
    background: rgba(0, 0, 0, .5);
  }

  ::v-deep .el-dialog {
    .el-dialog__header {
      padding: 12px 16px;
      background: #F5F8FC;

      .head-title {
        font-size: 16px;
        color: #202933;
        font-weight: 500;
        line-height: 1.5;
      }

      .head-tip {
        font-size: 14px;
        color: #B9C0C7;
        font-weight: 400;
        line-height: 1.5;

        a {
          cursor: pointer;
          color: #0C7FF2;
        }
      }
    }

    .el-dialog__body {
      .content {
        .el-form {
          .el-form-item__label {
            color: #202933;
          }

          .el-form-item__content {
            .el-button {
              padding: 7.5px 0;
              background: rgba(12, 127, 242, 0.1);
              font-size: 14px;
              color: #0C7FF2;
              border: 1px solid rgba(12, 127, 242, 0.1);
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding: 24px 0;
      text-align: center;
      border-top: 1px solid #E5EAF0;
    }
  }
}
</style>
